<template>
  <div class="index">
    <div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">{{title}}</div>
    </div>

    <div style="padding: 0.3rem;">
    	<div class="yy">
    		<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{detail.khmc}}</div>
    		<div class="flex">
    			<div style="flex: 1; overflow: hidden;">
    				<div style="color: #999; margin-bottom: 0.1rem;">跟进状态</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{detail.gjzt}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
    				<div style="color: #666; margin-bottom: 0.2rem;" >{{detail.createtime}}</div>

            <div style="color: #999; margin-bottom: 0.1rem;">最近一次拜访</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{detail.lasttime}}</div>
    			</div>
    			<div style="flex: 1; overflow: hidden;">
            <div style="color: #999; margin-bottom: 0.1rem;">客户类型</div>
            <div style="color: #666; margin-bottom: 0.2rem;">{{detail.khlx}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">联系电话</div>
    				<div style="color: #666; margin-bottom: 0.2rem;">{{detail.dh}}</div>

    				<div style="color: #999; margin-bottom: 0.1rem;">客户状态</div>
    				<div style="color: #259b24;; " v-if="detail.spzt == 0">已审批</div>
    				<div style="color: #1989fa; " v-if="detail.spzt == 1">待审批</div>
    				<div style="color: #f00; " v-if="detail.spzt == 2">不通过</div>
    			</div>
    		</div>
    	</div>
    	<div class="flex" style="margin-bottom: 0.3rem;">
    		<div @click="act = 1" :class="act == 1?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">基本信息</div>
    		<div @click="act = 2" :class="act == 2?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">联系人</div>
    		<div @click="act = 3" :class="act == 3?'act':''" style="border-bottom: 2px #fff solid; margin-right: 0.4rem; padding-bottom: 0.1rem;">拜访记录</div>
    	</div>

    	<div v-show="act == 1">
    		<div style="margin-bottom: 0.3rem; font-size: 0.26rem;">基本信息</div>
    		<div style="font-size: 0.26rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">公司名称</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.gsmc}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">客户来源</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.khly}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">所属行业</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.sshy}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">人员规模</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.rygm}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">备注</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.bz}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">传真</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.cz}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">官网</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.wz}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">邮编</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.yb}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">详细地址</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.dz}}</div>
    			</div>
    		</div>

    		<div style="margin-bottom: 0.26rem; font-size: 0.28rem;">其他信息</div>
    		<div style="font-size: 0.26rem; margin-bottom: 0.5rem;">
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">负责人</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.fzr}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">创建时间</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.createtime}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">最近一次修改时间</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.lasttime}}</div>
    			</div>
    			<div class="flexc" style="margin-bottom: 0.2rem;">
    				<div style="padding-left: 0.6rem; width: 2.5rem; color: #999;">上一任负责人</div>
    				<div style="flex-grow: 1; color: #666;">{{detail.syrfzr}}</div>
    			</div>
    		</div>

    		<div class="flexcc">


    			<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="tuihui()" v-if="!gonghai && person.title == '销售内勤'">退回公海</van-button>
          <van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="laoqu()" v-if="gonghai">捞取客户</van-button>

    			<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="go()" v-if="person.title == '销售内勤'">编辑</van-button>
    			<van-button type="danger" size="small" style=" padding: 0 15px; border-radius: 0.1rem;" @click="shanchu" v-if="person.title == '销售内勤'">删除</van-button>
    		</div>
    	</div>

    	<div v-show="act == 2">
    		<div class="yy" v-for="(item,index) in lianxirenlist" :key="index" style="margin-bottom: 0.2rem;" @click="go2('/lianxiren/xiangqing',item.id)">
    		  <div class="flexbc" style="border-bottom: 1px dashed #ddd; padding-bottom: 0.2rem;">
    		    <div style="font-weight: bold; font-size: 0.3rem;">{{item.khmc}}</div>
    		    <div><van-icon name="edit" color="#259b24" size="0.35rem" style=" font-weight: bold;" @click.stop="go2('/lianxiren/xinjiankehu',item.id)" /></div>
    		  </div>

    			<div class="flex" style="padding-top: 0.2rem;">
    				<div style="flex: 1; overflow: hidden; " class="flexc">
    		      <div>
    		        <div style="font-size: 0.3rem; margin-bottom: 0.2rem;">{{item.xm}}</div>
    		        <div>{{item.bm}}/{{item.zw}}</div>
    		      </div>
    				</div>
    				<div style="flex: 1; overflow: hidden;">
    					<div class="flexc" style="margin-bottom: 0.2rem;"><van-icon name="phone-o" style="margin-right: 0.1rem;" />{{item.dh}}</div>
    		      <div class="flexc" style="margin-bottom: 0.2rem;"><van-icon name="envelop-o" style="margin-right: 0.1rem;" />{{item.yx}}</div>
    		      <div class="flexc" style="margin-bottom: 0.1rem;"><van-icon name="location-o" style="margin-right: 0.1rem;" />{{item.dz}}</div>
    				</div>

    			</div>
    		</div>
        <div class="flexcc">
        	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="xiebanfang2()" v-if="!gonghai">新建联系人</van-button>
        </div>
    	</div>

    	<div v-show="act == 3">
    		<div class="yy" v-for="(item,index) in baifanglist" :key="index" style="margin-bottom: 0.2rem;" @click="go3('/baifang/xiangqing',item.id)">
    		  <div class="flexbc" style="border-bottom: 1px dashed #ddd;">
    		    <div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">{{item.yjtjsj}}</div>
    		    <div>
    		      <div style="color: #259b24; " v-if="item.spzt == 0">已审批</div>
    		      <div style="color: #1989fa; " v-if="item.spzt == 1">待审批</div>
    		      <div style="color: #f00; " v-if="item.spzt == 2">不通过</div>
    		    </div>
    		  </div>

    			<div class="flex" style="padding-top: 0.2rem;">
    				<div style="flex: 1; overflow: hidden;">
    		      <div style="color: #999; margin-bottom: 0.1rem;">客户姓名/电话</div>
    					<div style="color: #333; margin-bottom: 0.2rem;">{{item.bbfrxm}}/{{item.bbfrlxfs}}</div>

    		      <div style="color: #999; margin-bottom: 0.1rem;">客户类型/拜访方式</div>
    					<div style="color: #666; margin-bottom: 0.2rem;" ><span>{{item.xlkh}}</span>/{{item.bffs}}</div>
    				</div>

    				<div style="flex: 1; overflow: hidden;">
    					<div style="color: #999; margin-bottom: 0.1rem;">销售负责人</div>
    					<div style="color: #666; margin-bottom: 0.2rem;">{{item.createname}}</div>

    		      <div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
    		      <div style="color: #666; margin-bottom: 0.2rem;">{{item.createtime}}</div>
    				</div>
    			</div>
    		</div>
        <div class="flexcc">
        	<van-button type="info" size="small" style="margin-right: 0.3rem; padding: 0 15px; border-radius: 0.1rem;" @click="xiebanfang()" v-if="!gonghai">写拜访</van-button>
        </div>
    	</div>


    </div>

    <van-popup v-model="tuihuilog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户退回至公海客户？</div>
    			<div>转移成功后，此客户数据将属于公共资源，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0 15px;" @click="tuihuilog = false">取消</van-button>
    			<van-button type="info" size="small" style="padding: 0 15px;" @click="tuihuigo">确认</van-button>
    		</div>
    	</div>
    </van-popup>
    <van-popup v-model="laoqulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">捞取公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户进行捞取？</div>
    			<div>提交捞取申请后，请等待销售内勤审批，审批过后可以跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0 15px;" @click="laoqulog = false">取消</van-button>
    			<van-button type="info" size="small" style="padding: 0 15px;" @click="laoqugo">确认</van-button>
    		</div>
    	</div>
    </van-popup>
    <van-popup v-model="shanchulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;" v-if="gonghai">删除公海客户</div>
        <div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;" v-if="!gonghai">删除客户</div>
    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户删除？</div>
    			<div>删除成功后，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0 15px;" @click="shanchulog = false">取消</van-button>
    			<van-button type="info" size="small" style="padding: 0 15px;" @click="shanchugo()" v-if="gonghai">确认</van-button>
          <van-button type="info" size="small" style="padding: 0 15px;" @click="shanchugo2()"v-if="!gonghai">确认</van-button>
    		</div>
    	</div>
    </van-popup>
  </div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'index',
		data() {
			return {
         act:1,
         detail:"",
         shanchulog:false,
         shanchuall:{
            khid:"",
            fzrid:""
          },

        tuihuilog:false,
        tuihuiall:{
           khid:"",
           fzrid:""
         },
         laoqulog:false,
         laoquall:{
           khid:"",
           fzrid:""
         },
         lianxirenlist:[],
         baifanglist:[],

         gonghai:false,
         title:"",

         person:JSON.parse(localStorage.getItem('person'))
			}
		},
		created() {

      if(this.$route.query.gonghai){
        this.gonghai = true
        this.title = "公海客户详情"
        this.getlist2()
      }else{
        // this.all.fzrid = JSON.parse(localStorage.getItem('person')).userid
        this.title = "客户详情"
        this.getlist()
      }

		},
		mounted() {

		},
		methods: {
      shanchugo:function(){
        axios.post('/OpenCustomer/deleteOpencustomer',this.shanchuall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已删除公海客户');
            this.$router.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      //删除普通
      shanchugo2:function(){
        axios.post('/Customer/deleteCustomer',this.shanchuall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已删除客户');
            this.$router.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      shanchu:function(){
        this.shanchuall = {
           khid:this.detail.id,
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
         }
        this.shanchulog = true
      },
      //新建拜访带id
      xiebanfang:function(){
        this.$router.push({
          path:'/baifang/xinjiankehu',
          query:{
            baifang:true,
            khmc:this.detail.khmc,
            khid:this.detail.id
          }
        })
      },
      //新建联系人带id
      xiebanfang2:function(){
        this.$router.push({
          path:'/lianxiren/xinjiankehu',
          query:{
            khmc:this.detail.khmc,
            khid:this.detail.id
          }
        })
      },
      go3:function(url,id){
        this.$router.push({
          path:url,
          query:{
            id:id,
          }
        })
      },
      go2:function(url,id){
        this.$router.push({
          path:url,
          query:{
            id:id,
            bianji:true
          }
        })
      },
      go:function(){
        this.$router.push({
          path:'/kehu/xinjiankehu',
          query:{
            id:this.detail.id,
            bianji:true,
            gonghai:this.gonghai?true:false
          }
        })
      },
      //捞取
      laoqu:function(){
        this.laoquall = {
           khid:this.detail.id,
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
         }
        this.laoqulog = true
      },
      laoqugo:function(){
        axios.post('/OpenCustomer/updateFishOpencustomer',this.laoquall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已捞取公海客户');
            this.$router.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      //退回
      tuihui:function(){
        this.tuihuiall = {
           khid:this.detail.id,
           fzrid:JSON.parse(localStorage.getItem('person')).userid,
         }
        this.tuihuilog = true
      },
      tuihuigo:function(){
        axios.post('/Customer/updateBackCustomer',this.tuihuiall).then((response)=>{
        	if (response.data.state == 200) {
            vant.Toast('已退回至公海客户');
            this.$router.back()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      //普通客户
      getlist:function(){
        axios.get('/Customer/queryCustomerDetail?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.detail = response.data.data
            this.getlianxiren(response.data.data.khmc)
            this.getbaifang(response.data.data.khmc)
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      //公海客户
      getlist2:function(){
        axios.get('/OpenCustomer/queryOpencustomerDetail?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.detail = response.data.data
            this.getlianxiren()
            this.getbaifang()
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      getlianxiren:function(){
        axios.get('/Contact/queryCustomerContactlist?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.lianxirenlist = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      getbaifang:function(){
        axios.get('/Visit/queryCustomerVisitList?khid='+this.$route.query.id).then((response)=>{
        	if (response.data.state == 200) {
            this.baifanglist = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      // @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
      sexConfirm:function(val){
      	this.sex.xuanzhong = val
      	console.log(this.sex.xuanzhong)
      	this.sex.log = false
      },
      sexCancel:function(val){
      	console.log(val)
      },
      sexChange:function(val){
      	console.log(val)
      }
    }
	}
</script>

<style scoped lang="less">

</style>
